<!--
 * @Author: 敬华丰 2637844016@qq.com
 * @Date: 2023-08-15 10:27:32
 * @LastEditors: 敬华丰 2637844016@qq.com
 * @LastEditTime: 2023-08-15 10:53:45
 * @FilePath: \出口卖家端\src\views\LoanBill\ExportDeposit\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 出口保证金 -->
  <c-main-template minHeight="auto" :isBreadcrumb="false">
    <el-row :gutter="24" class="pd-lg">
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">出口申请单号：</div>
          <el-input
            size="large"
            placeholder="请输入出口申请单号"
            v-model="querys.innerId"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>
      <el-col :span="17">
        <div class="flex-x-end">
          <el-button size="large" @click="handleReset">重 置</el-button>
          <el-button size="large" type="primary" @click="handleSelect"
            >查 询</el-button
          >
        </div>
      </el-col>
    </el-row>
  </c-main-template>
  <c-main-template
    v-loading="loading"
    class="mt-lg"
    minHeight="auto"
    title="出口保证金"
    :isBreadcrumb="false"
  >
    <c-table-template :data="tableData">
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column
        prop="innerId"
        label="出口申请单号" 
        align="center"
        min-width="220"
      />
      <el-table-column label="保证金金额（元）" align="center" min-width="220">
        <template #default="scope">
          {{ filters.thousands(scope.row.amount) }}</template
        >
      </el-table-column>
      <el-table-column label="创建时间" align="left" min-width="200">
        <template #default="scope">
          {{ filters.dateYMDHMSFormat(scope.row.timeCreate) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="250">
        <template #default="scope">
          <el-button
            link
            class="mr-sm"
            type="primary"
            size="small"
            v-if="!scope.row.payProofUrl"
            @click="handleDepositOpen(scope.row)"
          >
            <span>上传保证金</span>
          </el-button>
          <el-button
            link
            class="mr-sm"
            type="primary"
            size="small"
            v-else
            @click="onFileOpen(scope.row.payProofUrl)"
          >
            <span>查看凭证</span>
          </el-button>
        </template>
      </el-table-column>
    </c-table-template>
    <div class="flex-x-end pd-20">
      <c-page-template
        :total="total"
        :querys="querys"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <c-voucher-upload ref="cVoucherUploadRef" @change="tableList" />
  </c-main-template>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { useBasicsTable } from "@/hooks/useTable.js";
import { ElMessage } from "element-plus";
import { onFileOpen} from "@/utils/index.js";
import cVoucherUpload from "./components/VoucherUpload.vue";
const { proxy } = getCurrentInstance();
import { useRoute } from "vue-router";
const route = useRoute();
const cVoucherUploadRef = ref();

onMounted(() => {
  const item = route.query;
  if (item && item.key && item.id) {
    if (item.key * 1 === 2) {
      querys.value.innerId = item.id;
      delete route.query.id,route.query.key
    }
  }
});
const handleDepositOpen = (item) => {
  cVoucherUploadRef.value.handleOpen(item);
};
const {
  querys,
  tableData,
  total,
  loading,
  tableList,
  handleReset,
  handleSelect,
  handleSizeChange,
  handleCurrentChange,
} = useBasicsTable({
  url: "/sellerBill/pageExitSeller",
});
</script>